<template>
  <div>
    <div class="my-header">
      <i class="back" @click="$router.go(-1)"></i>
      <strong>购物车</strong>
      <span>筛选</span>
    </div>
    <!-- 购物车列表 -->
    <div class="Section">
      <div class="login-info" v-if="!isLogin">
        <p>登录后同步电脑与手机购物车中的商品</p>
        <button class="login" @click="$router.push('/login')">点击登录</button>
      </div>
      <div>
        <div v-if="cartList" class="goods">
          <div v-for="store in cartList" :key="store.uId">
            <div class="store">
              <i class="select-default-icon"></i>
              <span>{{store.supplierWarehouse}}</span>
            </div>
            <div class="store-pd" v-for="(item,index) in store.goodsList" :key="index">
              <div class="store-pd-item" v-for="size in item.sizeList" :key="size.cartId">
                <i :class="['select-default-icon',item.checked ? 'select-icon' : '']" @click="checked(item)"></i>
                <div class="pd-images">
                  <img :src="item.goodsImg" alt="">
                </div>
                <div class="pd-info">
                  <div class="pd-title">
                    <p>{{item.sellingPoints}}</p>
                  </div>
                  <!--<div class="pd-sku">
                    <p class="sku-info">{{item.sellingPoints}}</p>
                  </div>-->
                  <div class="pd-price">
                    <div class="left">
                      <span>&yen;</span>
                      <strong>{{size.discountMoney}}</strong>
                    </div>
                    <div class="right">
                      <div class="cut" @click="editProductNum({item:item,increment:-1})"></div>
                      <input type="text" v-model="size.cartNum" class="num-inp" @change="editProductNum({item:item,counter:item.counter})">
                      <div class="add" @click="editProductNum({item:item,increment:1})"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="empty" v-if="!cartList || cartList == ''">
            <i class="iconfont icon-cart"></i>
            <p class="empty_txt">购物车是空的</p>
          </div>
        </div>

      </div>
    </div>
    <!-- 购物车列表 -->
    <!-- 底部价格计算 -->
    <div class="section-bar">
      <div class="left">
        <i :class="['select-default-icon',selectedAll ? 'select-icon' : '']" @click="selectedAllGoods"></i>全选<strong>合计：&yen;</strong>
      </div>
      <div class="right" @click="confirmOrder">
        <strong>去结算
          <span></span>
        </strong>
      </div>
    </div>
    <!-- 底部价格计算 -->
    <footertab> </footertab>
  </div>
</template>
<script>
  import footertab from '@/components/footer/footer'
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        userId: '',
        cartList: null,
        allLoaded: false,
        distance: 30,
        totalFee: 0,
        selectedCounter: 0,
        selectedAll: false,
        isLogin: false
      }
    },
    watch: {},
    components: {
      footertab
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    methods: {
      selectedAllGoods() {},
      confirmOrder() {},
      loadTop() {
        // 下拉刷新
        this.$refs.loadmore.onTopLoaded()
        this.fetchData()
      },
      loadBottom() {
        // 底部加载更多
        console.log('dddd')
        this.$refs.loadmore.onBottomLoaded()
      },
      fetchData() {
        // 判断是否登录
        this.isLogin = this.userInfo ? 1 : 0
        if (!this.userInfo) return
        // 获取购物车信息
        const formData = {
          userId: this.userInfo.id,
          status: 1 // 1 采购
        }
        this.$store.dispatch('getCartProductList', formData).then(res => {
          this.cartList = null
          // res.data.cartList
        }).catch(err => {
          console.log(err)
        })
      }
    },
    // mounted() {
    //   this.init()
    // },
    created() {
      this.fetchData()
    }
  }

</script>
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .my-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 1.25rem;
    background: #fff;
    padding: $padding;
    @include flexbox(space-between, center, row, nowrap);
    border-bottom: 1px solid #eee;
    .back {
      display: block;
      width: .65rem;
      height: .65rem;
      background: url('~assets/common/images/arrow-left.png') no-repeat;
      background-size: 100%;
    }
    strong {
      font-size: 18px;
      font-weight: normal;
      color: #333;
    }
    span {
      font-size: 18px;
    }
  }

  .cart-title {
    @include flexbox(center,
    center,
    row,
    nowrap);
    font-size: 16px;
  }

  .edit {
    @include flexbox(space-between,
    center,
    row,
    nowrap);
    min-width: 2rem;
    padding: 0 5px;
    i {
      height: .65rem;
      min-width: .65rem;
      background-position: -2.6rem 0 !important;
    }
    .edit-title {
      font-size: 16px;
      color: #999;
    }
  }
  /* 购物车列表 */

  .Section {
    .login-info {
      margin-top: 40px;
      position: relative;
      z-index: 1;
      padding: $padding 25px;
      border-top: 1px solid #eee;
      @include flexbox(flex-start,
      center,
      column,
      nowrap);
      .login {
        border: 1px solid $red;
        color: $red;
        background: transparent;
        width: 80px;
        height: 25px;
        @include flexbox(center,
        center,
        row,
        nowrap);
        flex: initial;
        margin-right: 10px;
        border-radius: 2px;
      }
      p {
        font-size: 14px;
        color: #999;
        line-height: 2;
      }
    }
    .goods {
      @include flexbox(flex-start,
      space-between,
      column,
      wrap);
      padding-bottom: 3rem;
      .store {
        @include flexbox(flex-start,
        center,
        row,
        nowrap);
        flex: initial;
        font-size: 14px;
        padding: 10px;
        span {
          margin-left: 10px;
        }
      }
      .store-pd {
        @include flexbox(flex-start,
        space-between,
        column,
        wrap);
        background: #fff;
        flex: initial;
        .store-pd-item {
          @include flexbox(flex-start,
          center,
          row,
          nowrap);
          padding: 10px;
          border-bottom: 1px solid #eee;
          &:last-child {
            border-bottom: none;
          }
          .pd-images {
            border: 1px solid #eee;
            margin: 0 10px 0 10px;
            width: 75px;
            height: 75px;
            text-align: center;
            img {
              width: auto;
              height: 100%;
            }
          }
          .pd-info {
            @include flexbox(flex-start,
            space-between,
            column,
            wrap); // width: 100%;
            // flex: initial;
            .pd-title {
              @include textoverflow(2); // width: 90%;
              font-size: 13px;
              color: #333;
            }
            .pd-sku {
              @include textoverflow(1);
              padding: 5px 0;
              line-height: 1.5;
              font-size: 12px;
              color: #999;
            }
            .pd-price {
              margin-top: 10px;
              @include flexbox(space-between,
              center,
              row,
              nowrap);
              flex: initial;
              .left {
                color: #e93b3d;
                span {
                  font-size: 12px;
                }
                strong {
                  font-size: 16px;
                  font-weight: normal;
                }
              }
              .right {
                @include flexbox(space-between,
                center,
                row,
                nowrap);
                flex: initial;
                border-radius: 2px;
                border: 1px solid #eee;
                width: 2rem;
                .cut {
                  padding: 2px 0;
                  font-size: 14px;
                  text-align: center;
                  width: 30%;
                  height: .6rem;
                  position: relative;
                  cursor: pointer;
                  &:before {
                    content: '';
                    position: absolute;
                    right: 0;
                    top: 0;
                    background: #eee;
                    width: 1px;
                    height: 100%;
                  }
                  &:after {
                    content: '';
                    position: absolute;
                    left: calc(100%/2 - 5px);
                    top: 50%;
                    background: #999;
                    width: 40%;
                    height: 1px;
                  }
                }
                .add {
                  padding: 2px 0;
                  width: 30%;
                  height: .6rem;
                  font-size: 14px;
                  text-align: center;
                  position: relative;
                  cursor: pointer;
                  &:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: #eee;
                    width: 1px;
                    height: 100%;
                  }
                  &:after {
                    content: '+';
                    position: absolute;
                    left: calc(100%/2 - 5px);
                    top: calc(100%/2 - 8px);
                    font-size: 14px;
                    color: #999; // width: 50%;
                    // height: 1px;
                  }
                }
                .num-inp {
                  border: none;
                  outline: none;
                  text-align: center;
                  padding: 0 5px;
                  width: 40%;
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
    .empty {
      p {
        padding: 100px 0;
        text-align: center;
        font-size: 16px;
        color: #999;
      }
    }
  }
  /* 购物车列表 */
  /* 底部计算栏 */

  .section-bar {
    position: fixed;
    border-top: 1px solid #eee;
    bottom: 1.32rem;
    width: 100%;
    background: #fff;
    height: 1.25rem;
    @include flexbox(space-between,
    center,
    row,
    nowrap);
    .left {
      background: #fff;
      font-size: 12px;
      height: 100%;
      padding: 10px;
      width: 70%;
      @include flexbox(flex-start,
      center,
      row,
      nowrap);
      flex: initial;
      font-size: 13px;
      i {
        vertical-align: text-top;
        margin-right: 5px;
      }
      strong {
        margin-left: 10px;
        font-weight: normal;
        font-size: 17px;
        @include textoverflow(1);
      }
    }
    .right {
      width: 30%;
      height: 100%;
      background: #e4393c;
      color: #fff;
      @include flexbox(center,
      center,
      row,
      nowrap);
      strong {
        font-size: 17px;
        font-weight: normal;
        span {
          font-size: 14px;
        }
      }
    }
  }
  /* 底部计算栏 */

</style>
